<template>
  <div class="g-container" style="height: 100%;padding: 20px;">
    <div :id="uniqueID" style="height: 100%;margin-top: 1%;" />
    <div :id="uniqueID2" style="height: 100%;margin-top: 1%;" />
  </div>
</template>

<script>
import echarts from 'echarts'
import uuidv1 from 'uuid/v1'

import defaultmixins from '@/mixins/bigScreen/defaultmixins'
const getArrByKey = (data, k) => {
  const key = k || 'value'
  const res = []
  if (data) {
    data.forEach(function(t) {
      res.push(t[key])
    })
  }
  return res
}
export default {
  name: 'ElectronDistribution',
  mixins: [defaultmixins],
  data() {
    return {
      uniqueID: '',
      uniqueID2: '',
      data: [{ value: 135, name: '五厂' },
        { value: 234, name: '四厂' },
        { value: 310, name: '六厂' },
        { value: 335, name: '密炼' }],
      data2: [
        {
          name: '五厂',
          value: 1612,
          sum: 83.97
        },
        {
          name: '四厂',
          value: 1212,
          sum: 25.54
        },
        {
          name: '六厂',
          value: 1012,
          sum: 21.33
        },
        {
          name: '密炼',
          value: 909,
          sum: 19.16
        }],
      color: ['#41B3E8', '#39CDA1', '#ECAE33', '#E4E26A']
    }
  },
  created() {
    this.uniqueID = uuidv1()
    this.uniqueID2 = uuidv1()
  },
  mounted() {
    var myChart = echarts.init(document.getElementById(this.uniqueID))
    var myChart2 = echarts.init(document.getElementById(this.uniqueID2))
    var scale = this.$root.setting.scale

    var a = 0
    for (var i = 0; i < this.data.length; i++) {
      a += this.data[i].value
    }
    this.data.push({ value: 3 * a, name: '__other', itemStyle: { normal: { color: 'rgba(0,0,0,0)' }}})
    const self = this
    const option = {
      title: null,
      tooltip: null,
      legend: null,
      color: ['rgba(182, 186, 100, 0.8)', 'rgba(197, 151, 56, 0.8)',
        'rgba(53, 188, 153, 0.8)', 'rgba(54, 149, 199, 0.8)'],
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '160%',
          startAngle: -180,
          center: ['90%', '90%'],
          data: self.data,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          label: {
            normal: {
              show: false
            }
          }
        }
      ]
    }
    myChart.setOption(option)

    // line
    var charts = { // 按顺序排列从大到小
      cityList: ['五厂', '四厂', '六厂', '密炼'],
      cityData: [7500, 6200, 5700, 4200],
      numData: [83.97, 25.54, 21.33, 19.16]
    }
    var top10CityList = charts.cityList
    var top10CityData = charts.cityData
    var color = ['#41B3E8', '#39CDA1', '#ECAE33', '#E4E26A']

    let lineY = []
    for (var i = 0; i < charts.cityList.length; i++) {
      var x = i
      if (x > color.length - 1) {
        x = color.length - 1
      }
      var data = {
        name: charts.cityList[i],
        color: color[x] + ')',
        value: top10CityData[i],
        numData: 2,
        itemStyle: {
          normal: {
            show: true,
            color: color[x],
            barBorderRadius: 10
          },
          emphasis: {
            shadowBlur: 15,
            shadowColor: 'rgba(0, 0, 0, 0.1)'
          }
        }
      }
      lineY.push(data)
    }

    const option2 = {
      title: {
        show: false
      },
      tooltip: {
        trigger: 'item'
      },
      grid: {
        borderWidth: 0,
        top: '10%',
        left: '5%',
        right: '15%',
        bottom: '3%'
      },
      color: color,
      yAxis: [{
        type: 'category',
        inverse: true,
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: false,
          inside: false
        },
        data: top10CityList
      }, {
        type: 'category',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          inside: false,
          padding: [0, 0, 10, 0],
          textStyle: {
            color: '#b3ccf8',
            fontSize: 24 * scale,
            fontFamily: 'PingFangSC-Regular'
          },
          align: 'right',
          verticalAlign: 'bottom',
          formatter: function(val, index) {
            return charts.numData[index] + '%    ' + val + 'kWh'
          }
        },
        splitArea: {
          show: false
        },
        splitLine: {
          show: false
        },
        data: top10CityData
      }],
      xAxis: {
        type: 'value',
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        }
      },
      series: [{
        name: '',
        type: 'bar',
        zlevel: 2,
        barWidth: '10px',
        showBackground: true,
        lineHeight: 34 * scale,
        fontSize: 24 * scale,
        shadowOffsetX: '-20px',
        data: lineY,
        animationDuration: 1500,
        label: {
          normal: {
            color: 'source',
            show: true,
            position: [0, '-24px'],
            textStyle: {
              fontSize: 24 * scale
            },
            formatter: function(a, b) {
              return '· ' + a.name
            }
          }
        }
      }],
      animationEasing: 'cubicOut'
    }

    myChart2.setOption(option2)
    window.addEventListener('resize', () => {
      myChart.resize()
      myChart2.resize()
    })
  }

}
</script>

<style lang="scss" scoped>
  .g-container {
    width: 100%;
    display: grid;
    grid-template-columns: 255px calc(100% - 255px);
  }
</style>
